<!--样式定义如何显示html元素，样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的css文档，外部样式表使你有能力同时改变站点中所有页面的样式和外观

样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表

层叠次序：
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
-->
<!--1dm = 16px-->
<html>

<head>
    <meta charset="utf-8" />
    <!-- text-indent首行缩进标签-->
    <style>
        p {
            text-indent: -5em;
            padding-left: 5em;
        }
        
        div {
            width: 500px;
        }
        
        p {
            text-indent: 20%;
        }
        
        p.spread {
            word-spacing: 30px;
        }
        
        p.tight {
            word-spacing: -0.5em;
        }
        
        h1 {
            letter-spacing: -0.5em;
            text-transform: uppercase;
            font-family: sans-seri;
            font-style: italic;
        }
        
        h4 {
            letter-spacing: 20px;
            font-style: oblique;
            font-weight: bold;
            font-size: 1em;
        }
        
        p {
            white-space: normal;
        }
    </style>

</head>

<body>
    <p>这是一个p标签</p>
    <div>
        <p>this is a paragragh</p>
    </div>
    <p class="spread">
        This is a paragraph. The spaces between words will be increased.
    </p>

    <p class="tight">
        This is a paragraph. The spaces between words will be decreased.
    </p>
    <h1>This is header 1</h1>
    <h4>This is header 4</h4>
    <p>This p aragraph has many spaces in i t.
    </p>

</body>

</html>